import 'package:pacsun/components/appbar.dart';
import 'package:pacsun/view/task/theme/app_colors.dart';
import 'package:pacsun/view/task/widgets/cache_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';

class HowCoyplink extends StatelessWidget {
  final String platform;
  const HowCoyplink({super.key, required this.platform});

  @override
  Widget build(BuildContext context) {
    final Map<String, List<String>> platformMap = {
      'INSTAGRAM': [
        'assets/imgs/howLinkStep1.png',
        'assets/imgs/howLinkStep2.png',
        'assets/imgs/howLinkStep3.png'
      ],
      'TIKTOK': [
        'assets/imgs/howLinkStepTiktok1.png',
        'assets/imgs/howLinkStepTiktok2.png',
        'assets/imgs/howLinkStepTiktok3.png'
      ],
      'YOUTUBE': [
        'assets/imgs/howLinkStepYouTuBe1.png',
        'assets/imgs/howLinkStepYouTuBe2.png',
        'assets/imgs/howLinkStepYouTuBe3.png'
      ]
    };
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(textScaler: TextScaler.noScaling),
      child: Scaffold(
        backgroundColor: Colors.black,
        extendBodyBehindAppBar: true,
        appBar: CommonTransparentAppBar(
          title: 'How To Copy Link',
        ),
        body: Stack(
          children: [
            AppBarBg(
              bgSrc: 'assets/imgs/howCopyLinkBg.png',
              height: 242,
              width: 375,
            ),
            SafeArea(
              child: SingleChildScrollView(
                physics: const ClampingScrollPhysics(),
                child: Column(
                  children: [
                    Stack(
                      children: [
                        Container(
                          width: 375.w,
                          padding:
                              EdgeInsets.only(left: 30, top: 15, bottom: 20).r,
                          child: Column(
                            children: [
                              StepText(
                                step: '1',
                                text: 'Navigate to your Pos',
                              ),
                              StepText(
                                step: '2',
                                text: 'Click on the Share Button',
                              ),
                              StepText(
                                step: '3',
                                text: 'Press Copy Link',
                              ),
                              StepText(
                                step: '4',
                                text: 'Add Link to the Community',
                              ),
                            ],
                          ),
                        ),
                        Positioned(
                          right: 0.w,
                          child: SvgPicture.asset(
                            'assets/icons/icon_questionMark.svg',
                            width: 134.w,
                            height: 134.h,
                            color: Color(0XFF00B9EE).withAlpha(25),
                          ),
                        )
                      ],
                    ),
                    Container(
                      width: double.infinity,
                      padding: EdgeInsets.only(left: 27, top: 24, bottom: 24).r,
                      color: Color(0XFF222222),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            spacing: 4.w,
                            children: [
                              CacheNetworkImage(
                                imageUrl: platformMap[platform]?[0] ?? '',
                                width: 158.w,
                                height: 333.h,
                                imageType: ImageType.asset,
                              ),
                              CacheNetworkImage(
                                imageUrl: platformMap[platform]?[1] ?? '',
                                width: 158.w,
                                height: 333.h,
                                imageType: ImageType.asset,
                              )
                            ],
                          ),
                          SizedBox(height: 28.h),
                          CacheNetworkImage(
                            imageUrl: platformMap[platform]?[2] ?? '',
                            width: platform == 'YOUTUBE' ? 241.w : 324.w,
                            height: 121.h,
                            imageType: ImageType.asset,
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class StepText extends StatelessWidget {
  final String step;
  final String text;
  const StepText({super.key, required this.step, required this.text});

  @override
  Widget build(BuildContext context) {
    return Row(
      spacing: 12.w,
      children: [
        Container(
          width: 17.w,
          height: 17.h,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: Color(0XFFFFD20A),
            borderRadius: BorderRadius.circular(17).r,
          ),
          child: Text(
            step,
            style: customTextStyle(
              color: FamilyTextColor.black,
              fontWeight: 700,
            ),
          ),
        ),
        Text(
          text,
          style:
              customTextStyle(fontSize: 14, fontWeight: 600, height: 26 / 14),
        )
      ],
    );
  }
}
